<template>
  <!-- 数据集生成 -->
  <div class="page-header-index-wide">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="数据集">
                <a-select placeholder="请选择" default-value="数据集一">
                  <a-select-option value="数据集一">数据集一</a-select-option>
                  <a-select-option value="数据集二">数据集二</a-select-option>
                  <a-select-option value="数据集三">数据集三</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="聚合方式">
                <a-select placeholder="请选择" default-value="平均值">
                  <a-select-option value="平均值">平均值</a-select-option>
                  <a-select-option value="方差">方差</a-select-option>
                  <a-select-option value="均方根">均方根</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="11" :md="12" :sm="24">
              <a-form-item label="采样范围">
                <j-date placeholder="开始日期" class="query-group-cust" v-model="queryParam.recorddate_begin"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date placeholder="结束日期" class="query-group-cust" v-model="queryParam.recorddate_end"> </j-date>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="handleAnalyse" :loading="confirmLoading">模型训练</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-spin :spinning="confirmLoading">
      <div></div>
      <div v-if="isShowData">
        <a-row type="flex" style="margin-top: 10px">
          <a-col :flex="1" style="padding-right: 10px">
            <a-card hoverable title="LSTM模型">
              <p class="card-fcc">均方差<span class="card-fcx-value blue">6.2</span></p>
            </a-card>
          </a-col>
          <a-col :flex="1" style="padding: 0 10px">
            <a-card hoverable title="DQN模型">
              <p class="card-fcc">均方差<span class="card-fcx-value orange">5.8</span></p>
            </a-card>
          </a-col>
          <a-col :flex="1" style="padding: 0 10px">
            <a-card hoverable title="DNN模型">
              <p class="card-fcc">均方差<span class="card-fcx-value">9.3</span></p>
            </a-card>
          </a-col>
          <a-col :flex="1" style="padding: 0 10px">
            <a-card hoverable title="CNN模型">
              <p class="card-fcc">均方差<span class="card-fcx-value cyan">7.2</span></p>
            </a-card>
          </a-col>
          <a-col :flex="1" style="padding-left: 10px">
            <a-card hoverable title="RNN模型">
              <p class="card-fcc">均方差<span class="card-fcx-value red">8.2</span></p>
            </a-card>
          </a-col>
        </a-row>

        <a-card title="预测与实际值对比" style="margin-top: 10px">
          <line-chart-multid
            title=""
            :height="'400'"
            :dataSource="lineChartMultid.dataSource"
            :fields="lineChartMultid.fields"
          />
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import '@/assets/less/TableExpand.less'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  name: 'DataSetBuild',
  mixins: [JeecgListMixin],
  components: {
    Bar,
    LineChartMultid,
    ChartCard,
  },
  data() {
    return {
      description: '数据集生成',
      loading: true,
      isShowData: false,
      confirmLoading: false,
      bar: {
        dataSource: [
          {
            x: 'LSTM模型',
            y: 18.9,
          },
          {
            x: 'DQN模型',
            y: 12.4,
          },
          {
            x: 'DNN模型',
            y: 6.4,
          },
          {
            x: 'CNN模型',
            y: 6.2,
          },
          {
            x: 'RNN模型',
            y: 11.4,
          },
        ],
      },
      lineChartMultid: {
        dataSource: [
          { type: '03-04 08:00', LSTM: 7.0, DQN: 3.9, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 09:00', LSTM: 6.9, DQN: 4.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 10:00', LSTM: 9.5, DQN: 5.7, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 11:00', LSTM: 14.5, DQN: 8.5, DNN: 3.9, CNN: 4, RNN: 8 },
          { type: '03-04 12:00', LSTM: 18.4, DQN: 11.9, DNN: 3.9, CNN: 6, RNN: 8 },
          { type: '03-04 13:00', LSTM: 21.5, DQN: 15.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 14:00', LSTM: 25.2, DQN: 17.0, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 15:00', LSTM: 26.5, DQN: 16.6, DNN: 3.9, CNN: 15, RNN: 8 },
          { type: '03-04 16:00', LSTM: 23.3, DQN: 14.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 17:00', LSTM: 18.3, DQN: 10.3, DNN: 3.9, CNN: 16, RNN: 8 },
          { type: '03-04 18:00', LSTM: 13.9, DQN: 6.6, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 19:00', LSTM: 9.6, DQN: 4.8, DNN: 3.9, CNN: 1, RNN: 8 },
        ],
        fields: ['LSTM', 'DQN', 'DNN', 'CNN', 'RNN'],
      },
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {},
    handleAdd() {
      this.$router.push({ path: '/userFormula/add/0' })
    },
    handleEdit: function (record) {
      this.$router.push({ path: `/userFormula/add/${record.id}` })
    },
    handleAnalyse() {
      var that = this
      this.confirmLoading = true
      setTimeout(() => {
        that.isShowData = true
        that.confirmLoading = false
      }, 2000)
    },
  },
}
</script>
<style scoped>
.card-fcc {
  font-size: 14px;
  line-height: 36px;
  padding-left: 10px;
}

.blue {
  color: blue;
}

.red {
  color: red;
}

.cyan {
  color: cyan;
}

.orange {
  color: orange;
}

.card-fcx-value {
  font-size: 36px;
  margin-right: 20px;
  float: right;
}
</style>